<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dijit/themes/claro/claro.css">
	<style type="text/css">@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dojo/resources/dojo.css";
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dijit/themes/claro/claro.css";
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/../dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

/*Grid need a explicit width/height by default */
#grid {
    width: 60em;
    height: 40em;
}


</style>
<script>dojoConfig = {parseOnLoad: true}</script><script src='http://dojotoolkit.org/reference-guide/1.8/_static/js/dojo/dojo.js'></script>
<script>
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");

require([
				"dojo/store/JsonRest",
				"dojo/store/Memory",
				"dojo/store/Cache",
				"dojox/grid/EnhancedGrid",
				"dojo/data/ObjectStore",
				"dojo/query",
				"dojo/domReady!"
			], function(JsonRest, Memory, Cache, EnhancedGrid, ObjectStore, query){
				var myStore, dataStore, grid;
				myStore = Cache(JsonRest({target:"http://localhost:8085/ticket-manager/product/getall.do"}), Memory());
				var json = JsonRest({target:"http://localhost:8085/ticket-manager/product/getall.do"});
				var grid = new dojox.grid.EnhancedGrid({
				id: 'grid',
				store: dataStore = new ObjectStore({objectStore: myStore}),
				structure: [
					{name:"Id", field:"id", width: "200px"},
					{name:"Code", field:"code", width: "200px", editable: true}
				],
				rowSelector: '20px' ,
				plugins: {
				   pagination: {
					  pageSizes: ["20", "50", "100", "All"],
					  description: true,
					  sizeSwitch: true,
					  pageStepper: true,
					  gotoButton: true,
					  maxPageStep: 5,
					  position: "bottom"
				  }
				}
			}, document.createElement('div'));
				
			dojo.byId("gridDiv").appendChild(grid.domNode);
				
			grid.startup();
				
			});
</script>
</head>
<body class="claro">
    <div id="gridDiv"></div>
</body>
</html>